<template>
	<view class="content">
		<tab-select :tab_link="tab_link" @change="link_change" :cindex="tab_index" :img_width="55"></tab-select>
		<block v-if="tab_index == 0">
			<checkbox-group name="checked" @change="checkBox">
				<view class="row list" v-for="(item,index) in list" :key="index">
					<view class="col-24 listsj" @click="navtegtor(item)">
						{{item.createTime }}
					</view>
					<view class="col-24">
						<view class="row">
							<view class="col-2 listnrleft" @click="navtegtor(item)">
								<view class="col-24 lvdian">
									·
								</view>
								<view class="shuxian">
			
								</view>
								<view class="col-24 landian">
									·
								</view>
								<view class="col-24 hongdian">
									·
								</view>
							</view>
							<view class="col-20 listnrcenter" @click="navtegtor(item)">
								<view class="col-24 qidian">
									{{item.getOnPoint}}
								</view>
								<view class="col-24 zhongdian">
									{{item.getOffPoint}}
								</view>
								<view class="col-24 jinqian">
									<text>{{item.orderAmount}}</text>元
								</view>
							</view>
							<view class="col-2 listright t_right" v-if="tab_index != 1">
								<checkbox :value="index" :checked="cheAll == true ? 'checked' : ''" />
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</block>
		<block v-if="tab_index == 1">
			<!-- <view class="row hslist"> -->
			<view class="row hslist" v-for="(item,index) in list" :key="index" @click="$public.navTo('invoice/invoice_mx?id=' + item.id)">
				<view class="bo_list row">
					<view class="col-16">
						{{item.createTime}}
					</view>
				</view>
				<view class="row condesc">
					<view class="col-18">
						<view class="col-24 title t_size_30 t_size_bold">
							{{item.typeName}}（电子发票）
						</view>
						<view class="col-24 status t_size_26">
							{{item.isStatus == 0 ? '开票中' : '已开票' }}
						</view>
					</view>
					<view class="col-6 t_right">
						<text>{{item.money}}</text>元
					</view>
				</view>
			</view>
		</block>
		<view class="row tabs" v-if="tab_index == 0 && list.length != 0">
			<view class="col-2">
				<checkbox value="1" @click="checkBoxClick()" :checked="cheAll == true ? 'checked' : ''" />
			</view>
			<view class="col-16">
				全选<text>{{checkList.length}}</text>个行程，共计<text>{{checkCount.toFixed(2)}}</text>元
			</view>
			<view class="col-6">
				<button type="primary" @click="invocing()">下一步</button>
			</view>
		</view>
		<view class="rich" v-if="tab_index == 2">
			<view class="col-24" v-for="(item,index) in detail" :key="index">
				<view class="row" @click="detail_index == 1 ? detail_index = 0 : detail_index = 1">
					<view class="col-3">
						<image src="../../static/index/head_img.png" mode="heightFix"></image>
					</view>
					<view class="col-17 t_size_28">
						{{item.title}}
					</view>
					<view class="col-4 t_right">
						<image :src="detail_index == index ? '../../static/public/sq.png' : '../../static/public/zk.png'" mode="heightFix"></image>
					</view>
				</view>
				<view class="col-22 off-1" v-if="detail_index == index">
					<rich-text v-if="tab_index == 2" :nodes="item.content"></rich-text>
				</view>
			</view>
		</view>
		<view class="clear t_center t_size_28" v-if="list.length==0 && tab_index != 2">
			<image src="../../static/public/zwnr.png" mode="heightFix"></image>
			<view>
				暂无{{tab_index == 0 ? '可开票行程' : '开票记录'}}
			</view>
		</view>
	</view>
</template>

<script>
	import tab_select from '@/components/trip/tab_select.vue'
	export default {
		components: {
			"tab-select": tab_select
		},
		data() {
			return {
				tab_link: [{
						id: 0,
						name: '出行开票'
					},
					{
						id: 1,
						name: '开票历史'
					},
					{
						id: 2,
						name: '开票帮助'
					}
				],
				tab_index: 0,
				objPage: {
					pageNum: 1,
					pageSize: 10
				},
				list: [],
				loading: true,
				detail: [],
				detail_index: 0,
				checkList:[],
				checkCount: 0,
				cheAll: false
			}
		},
		onShow() {
			this.list = [];
			this.loading = true;
			this.objPage.pageNum = 1;
			this.switch_tab(this.tab_link[this.tab_index].id)
		},
		watch:{
			tab_index(n,d){
				this.objPage.pageNum = 1;
				this.list = [];
				this.loading = true;
				this.switch_tab(this.tab_link[n].id)
			}
		},
		onReachBottom() {
			this.objPage.pageNum += 1;
			this.switch_tab(this.tab_link[this.tab_index].id);
		},
		methods: {
			// 获取可开票信息列表
			async load(){
				if(!this.loading){
					return
				}
				let res = await this.$api.request(this.$api.invoice.getorderList,this.objPage);
				if(res){
					this.list = this.list.concat(res.list);
					this.cheAll = false;
					if(res.list.length != this.objPage.pageSize){
						this.loading = false;
					}
				}
			},
			async helpLoad(){
				let res = await this.$api.request(this.$api.invoice.gethelpinfo);
				if(res){
					this.detail = res;
				}
			},
			async historyLoad(){
				let res = await this.$api.request(this.$api.invoice.getlist,this.objPage);
				if(res){
					this.list = this.list.concat(res.list);
					if(res.list.length != this.objPage.pageSize){
						this.loading = false;
					}
				}
			},
			navtegtor(item){
				if(item.orderType == 1){
					this.$public.navTo('trip/trip_detail?id='+item.orderId)
				}else{
					this.$public.navTo('index/status?orderId='+item.orderId + '&status=' + item.orderStateInside)
				}
			},
			link_change(e) {
				this.tab_index = e;
				this.checkList =[];
				this.checkCount = 0;
			},
			checkBox({detail}){
				this.checkList = detail.value;
				this.checkCount = 0;
				this.checkList.forEach(item => {
					this.checkCount += this.list[item].orderAmount;
				});
			},
			checkBoxClick(){
				this.cheAll = !this.cheAll;
				let arr = [];
				if(this.cheAll == true){
					this.list.forEach((item,index) => {
						arr.push(index)
					});
				}
				let e = {
					detail: {
						value: arr
					}
				}
				this.checkBox(e);
			},
			invocing(){
				let that = this;
				let orderIdList = [];
				this.checkList.forEach(item => {
					orderIdList.push(this.list[item].orderId);
				})
				if(orderIdList.length == 0){
					this.$public.showToast('请选择要开发票的行程');
					return
				}
				uni.setStorage({
					data:orderIdList,
					key:'orderIdList',
					success() {
						that.$public.navTo('invoice/invoice_tianxie')
					}
				})
			},
			switch_tab(e){
				switch(e){
					case 0:
						this.load();
						return false
					case 1: 
						this.historyLoad();
						return false
					case 2:
						this.helpLoad();
						return false
				}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 140rpx;
	}
	page {
		background-color: #f5f5f5;
	}

	.list{
		width: 90%;
		padding: 15rpx 5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.listsj {
			height: 61rpx;
			line-height: 61rpx;
			color: #999999;
		}

		.listnrleft {
			height: 150rpx;
			padding: 15rpx 0;

			.lvdian,
			.landian {
				height: 15rpx;
				line-height: 15rpx;
				font-size: 45rpx;
				font-weight: bold;
				color: #6CBF30;
				margin-top: 20rpx;
			}

			.shuxian {
				width: 1px;
				height: 40rpx;
				line-height: 40rpx;
				margin-left: 5.5px;
				border-left: 1px dotted #999999;
			}

			.landian {
				margin-top: 0;
				color: #07B0FF;
			}

			.hongdian {
				padding-top: 40rpx;
				height: 20rpx;
				line-height: 20rpx;
				font-size: 45rpx;
				font-weight: bold;
				color: #FF2626;
			}
		}

		.listnrcenter {
			color: #333333;
			height: 150rpx;
			padding: 15rpx 0;

			.qidian {
				padding-top: 10rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;
			}

			.zhongdian {
				padding-top: 25rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;
			}

			.jinqian {
				padding-top: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;

				text {
					color: #FF2626;
					font-size: 39rpx;
					font-weight: bold;
				}
			}
		}

		.listright {
			height: 150rpx;
			line-height: 150rpx;
			padding: 15rpx 0;
		}
	}

	.tabs{
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		padding: 15rpx 5%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		.col-16{
			color: #333333;
			text{
				color: #FF2626;
				margin: 0 3rpx;
			}
		}
		button{
			padding: 0;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 31rpx;
			background-color: #6CBF30;
		}
	}
	/* #ifdef MP-WEIXIN */
	/*checkbox 选项框大小  */
	checkbox .wx-checkbox-input {
		border-radius: 50%;
		background-color: #E6E6E6;
		border-color: #e6e6e6;
		color: #FFFFFF;
		position: relative;
	}
	
	checkbox .wx-checkbox-input::before{
		font: normal normal normal 14px/1 weui;
		content: "\EA08";
		width: 100%;
		text-align: center;
		height: 100%;
		line-height: 1.8;
		border-radius: 50%;
		font-size: 14px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #6CBF30;
		color: #FFFFFF;
	}
	/* #endif */
	
	.rich{
		.col-24{
			background-color: #FFFFFF;
		}
		.row{
			width: 92%;
			padding: 0 4%;
			margin-top: 20rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-bottom: 1rpx solid #ededed;
			.col-3{
				image{
					height: 60rpx;
					margin-top: 18rpx;
				}
			}
			.col-17{
				color: #333333;
			}
			.col-4{
				image{
					height: 15rpx;
					margin-top: 40rpx;
				}
			}
		}
		.col-22{
			padding: 39rpx 0;
			color: #999999;
			font-size: 26rpx;
		}
	}
	
	.hslist{
		width: 90%;
		padding: 15rpx 5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		.condesc{
			.col-18{
				height: 90rpx;
				padding: 30rpx 0;
				.title{
					color: #333333;
					height: 50rpx;
					line-height: 50rpx;
				}
				.status{
					color: #B3B3B3;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			.col-6{
				height: 150rpx;
				line-height: 150rpx;
				color: #333333;
				font-weight: bold;
				text{
					font-size: 36rpx;
					color: #FF2626;
				}
			}
		}
		.bo_list{
			height: 86rpx;
			line-height: 86rpx;
			color: #999999;
			font-size: 26rpx;
			border-bottom: 1rpx solid #ededed;
			button{
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				border-radius: 30rpx;
				margin-top: 18rpx;
				background-color: #6CBF30;
			}
		}
	}
</style>
